<template>
  <div class="content">
    <div
      class="contentBox"
      @click="look(item.id)"
      v-for="(item, index) in list"
      :key="index"
    >
      <div class="title">
        <div class="head">
          <div class="lingall">
            <div class="ling">
              <u-badge
			  v-if="item.isread == 0"
                :isDot="true"
                type="error"
                absolute
                offset="[0,0]"
              ></u-badge>
              <img src="@/assets/message/lingdang.png" alt="" />
            </div>
            <div class="titlet">{{ item.title }}</div>
          </div>
          <div class="date">{{ item.createtime }}</div>
        </div>
        <p class="remake">{{ item.content }}</p>
      </div>
      <div class="look">
        <span>查看详情</span>
        <img src="@/assets/message/right.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      total: 0,
      list: [],
    };
  },
  onReachBottom() {
    if (this.page < this.total) {
      this.page++;
      this.getlist();
    }
  },
  onShow() {
    this.page = 1;
    this.getlist();
  },
  methods: {
    getlist() {
      var that = this;
      this.$.ajax(
        1,
        "POST",
        "index/getnoticelist",
        {
          page: this.page,
          zonghe: this.zonghe,
          new: this.new,
          price: this.price,
          tuijian: this.tuijian,
          cid: this.cid,
          xiaoliang: this.xiaoliang,
        },
        (res) => {
          if (res.code == 1) {
            console.log(res.data.list);
            if (that.page == 1) {
              that.list = [];
            }
            that.list = [...res.data.list, ...that.list];
          }
        }
      );
    },
    look(e) {
      uni.navigateTo({
        url: "/pages/message/details?id=" + e,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  padding-top: 20rpx;
}
.contentBox {
  background: #fff;
  margin-top: 20rpx;
}
.title {
  padding: 24rpx 32rpx 30rpx 36rpx;
  border-bottom: 1rpx solid #f4f4f4;
  font-size: 36rpx;
  font-weight: 700;
}

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .lingall {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .date {
    color: #999;
    font-size: 24rpx;
    font-weight: 400;
  }
}

.remake {
  font-size: 14px;
  color: #999;
  line-height: 40rpx;
  margin: 20rpx 0 0rpx 0;
  overflow: hidden; /* 确保超出容器的文本被隐藏 */
  white-space: nowrap; /* 防止文本换行 */
  text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
}

.ling {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #e8eff5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /deep/ .u-badge{
    top: 5rpx;
    right: 0;
  }
  img {
    width: 17px;
    height: 17px;
  }
}

.titlet {
  font-family: Alibaba PuHuiTi 2;
  font-size: 36rpx;
  font-weight: 700;
  line-height: 50rpx;
  // text-align: left;
  margin-left: 20rpx;
}

.look {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx 22rpx 32rpx;

  img {
    width: 18rpx;
    height: 18rpx;
  }
}
</style>
